<template>
	<view class="order-details">
		<view class="header-class">
			<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>			
			<tn-navbar height="45px" home-icon="" :bottom-shadow="false" bg-color="tn-type-primary_bg" text-color="tn-white">订单详情</tn-navbar>
		</view>

		<view class="order-info-card">
			<view class="info-item">
				<text class="label">客户名称：</text>
				<text class="content">{{orderInfoData.businessname}}</text>
			</view>	
			<view class="info-item">
				<text class="label">单据编号：</text>
				<text class="content">{{orderInfoData.billcode}}</text>
			</view>	
			<view class="info-item">
				<text class="label">下单人：</text>
				<text class="content">{{orderInfoData.caozyname}}</text>
			</view>	
			<view class="logistics-info" v-if="orderInfoData.kdcode">
				<view class="tracking-number" @click="coypText(orderInfoData.kdcode)">
					<text class="label">{{ orderInfoData.kdname ? orderInfoData.kdname : '物流信息' }}：</text>
					<text class="tracking-code">{{orderInfoData.kdcode}}</text>
				</view>
				<tn-button type="primary" size="sm" @click="toKdState(orderInfoData)">物流状态</tn-button>
			</view>
			
			<view class="info-item">
				<text class="label">收货人：</text>
				<text class="content">{{orderInfoData.recemanname}} {{orderInfoData.recetelephone}}</text>
			</view>	
			<view class="info-item">
				<text class="label">收货地址：</text>
				<text class="content">{{orderInfoData.address}}</text>
			</view>	
			<view class="info-item" v-if="orderInfoData.remark">
				<text class="label">备注：</text>
				<text class="content">{{orderInfoData.remark}}</text>
			</view>	
		</view>

		<view class="goods-list">
			<view class="goods-item" v-for="item in orderInfoData.details" :key="item.goodsname">
				<view class="goods-name">
					<text class="item-number">{{item.billsn}}</text>
					{{item.goodsname}}
				</view>
				<view class="goods-spec">
					<text class="spec">{{item.goodsspec}}</text>
					<text class="unit">{{item.wmsmeas}}</text>
				</view>	
				<view class="goods-manufacturer">
					{{item.manufacturer}}
				</view>
				<view class="goods-batch">
					{{item.batchinfo}}
				</view>
				<view class="goods-price-info">
					<text class="quantity">{{item.num}}</text>
					<text class="price">{{item.taxprice}}</text>
				</view>	
				<view class="goods-amount">
					<text class="highlight-text">{{item.taxamount}}</text>
				</view>
			</view>
		</view>

		<view class="bottom-buttons">
			<view class="total-amount">
				<text class="amount-label">合计金额</text>
				<text class="amount-value">¥{{orderInfoData.taxamount}}</text>
			</view>
			<view class="action-button">
				<tn-button type="danger" size="lg" @click="toNavigate">加入购物车</tn-button>
			</view>
		</view>
		
		<tn-popup v-model="showPopup" class="logistics-popup">
			<view class="logistics-timeline">
				<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
			</view>
		</tn-popup>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted } from 'vue'
	import { postCall,postJD,postKDN  } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { toastMessage } from '@/utils/toast.js'
	import { createParams } from '@/utils/utils.js'
	
	const procName = "PROC_APP_DO_ORDER";
	const colors = "#fa436a";
	let orderInfoData = reactive({});
	const showPopup = ref(false)
	const jdStateData = reactive([]);
	const stepData = reactive([]);
	onMounted(()=>{
		const tempOrderInfo = uni.getStorageSync("ORDERINFO");
		Object.assign(orderInfoData,tempOrderInfo);
		console.log(tempOrderInfo)
	})
	 
	let toNavigate = ()=>{
		
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = "ADDSHOP";
		params["P_BILLNO"] = orderInfoData.billno;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
				    toastMessage("添加成功！");
					uni.setStorageSync("index",2);
				    uni.navigateTo({
					  url: '/pages/index/index'
				    })
				}
			}
		   
		})   
	} 

	let toKdState = (item)=>{
		console.log(item.body);
		showPopup.value = true;
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = "JD";
		Object.assign(params,JSON.parse(item.body));
		stepData.length = 0;
		// postJD(params).then(res=>{
		// 	if(res){
		// 		if(res.code===200){
		// 			console.log(res.data);
		// 		   if(res.data.code===1000){
		// 			   Object.assign(jdStateData,res.data.data)
		// 			   for(let i = 0 ;i<res.data.data.length;i++){
		// 				   let item = {};
		// 				   item.name = res.data.data[i].operationTitle;
		// 				   item.time = res.data.data[i].operationTime;
		// 				   item.isNow = 0;
		// 				   item.type = 1;
		// 				   item.desc = res.data.data[i].operationRemark;
		// 				   stepData.push(item)
		// 			   }
		// 			   stepData.sort(function(a,b){
		// 				   let dateA = new Date(a.time);
		// 				   let dateB = new Date(b.time);
		// 				   return dateB-dateA;
		// 			   })
		// 			   if(stepData.length>0){
		// 				   stepData[0].isNow = 1;
		// 			   }
		// 			   stepData.forEach(function(operation) {
		// 			     console.log(operation);
		// 			   });
		// 		   }else{
		// 			   toastMessage(res.data.message);
		// 		   }
		// 		}
		// 	}
		// })   
		params["P_ACTION"] = "KDN";
		postKDN(params).then(res=>{
			if(res){
				if(res.code===200){
					console.log(res.data);
				   if(res.data.Success){
					   Object.assign(jdStateData,res.data.Traces)
					   for(let i = 0 ;i<res.data.Traces.length;i++){
						   let item = {};
						   item.name = res.data.Traces[i].AcceptStation;
						   item.time = res.data.Traces[i].AcceptTime;
						   item.isNow = 0;
						   item.type = 1;
						   item.desc = res.data.Traces[i].Location;
						   stepData.push(item)
					   }
					   stepData.sort(function(a,b){
						   let dateA = new Date(a.time);
						   let dateB = new Date(b.time);
						   return dateB-dateA;
					   })
					   if(stepData.length>0){
						   stepData[0].isNow = 1;
					   }
					   stepData.forEach(function(operation) {
					     console.log(operation);
					   });
				   }else{
					   toastMessage(res.data.Reason);
				   }
				   
				}
			}
		})   
	}
	
	let coypText = (info) =>{
		uni.setClipboardData({
			data: info,//要被复制的内容
			success:() => {//复制成功的回调函数
				uni.showToast({//提示
					title:'复制成功' 
				})
			}
		});
	}
	
	
	// let sortTime = (a,b) =>{
	// 	return a.time - b.time
	// }
	
	// let getKdInfo = ()=>{
	// 	let params = {};
	// 	params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
	// 	params["P_ACTION"] = "JD";
	// 	postCall(params).then(res=>{
	// 		if(res){
	// 			if(res.code===200){
				    
	// 			}
	// 		}
	// 	}) 
	// }
	
</script>

<style>
.order-details {
	background-color: #f5f7fa;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.header-class {
	background: var(--tn-color-primary);
	padding-bottom: 15rpx;
}

.order-info-card {
	background: #fff;
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.info-item {
	padding: 16rpx 0;
	font-size: 28rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

.info-item:last-child {
	border-bottom: none;
}

.label {
	color: #666;
	margin-right: 10rpx;
}

.content {
	color: #333;
}

.logistics-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
}

.tracking-number {
	flex: 1;
}

.tracking-code {
	color: var(--tn-color-primary);
}

.goods-list {
	margin: 20rpx;
}

.goods-item {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.goods-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.item-number {
	background-color: var(--tn-color-primary);
	color: #fff;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	margin-right: 12rpx;
}

.goods-spec {
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.goods-manufacturer {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.goods-batch {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.goods-price-info {
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.goods-amount {
	font-size: 28rpx;
	color: #666;
}

.highlight-text {
	color: #ff6b6b;
	font-weight: 500;
}

.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

.total-amount {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.amount-label {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 4rpx;
}

.amount-value {
	font-size: 36rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.action-button {
	flex: 1;
	padding-left: 30rpx;
}

.action-button :deep(.tn-button) {
	width: 100%;
	height: 80rpx;
	border-radius: 40rpx;
	font-size: 30rpx;
	font-weight: 500;
}

.logistics-popup {
	width: 90vw;
	max-height: 80vh;
	border-radius: 24rpx;
	overflow: hidden;
}

.logistics-timeline {
	padding: 30rpx;
	background: #fff;
	max-height: 80vh;
	overflow-y: auto;
}
</style>
